<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微电影管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/resource/static/admin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/fonts/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/admin/dist/css/AdminLTE.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/resource/static/admin/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/datepicker3.css">
    <style>
        * {
            font-family: "Microsoft YaHei";
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;
            text-align: center;
        }

    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <%@ include file="../5-public/AdminSidebar.jsp" %>

    <div class="content-wrapper">
        <!--内容-->
        <section class="content-header">
            <h1>微电影管理系统</h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
                <li class="active">添加预告</li>
            </ol>
        </section>
        <section class="content" id="showcontent">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">添加预告</h3>
                        </div>
                        <form role="form">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="input_title">描述</label>
                                    <input type="text" class="form-control" id="input_description"
                                           placeholder="请输入描述！">
                                </div>
                                <div class="form-group">
                                    <label for="input_title">预告标题</label>
                                    <input type="text" class="form-control" id="input_title"
                                           placeholder="请输入预告标题！">
                                </div>
                                <div class="form-group">
                                    <label for="input_logo">预告封面</label>
                                    <input type="file" id="input_logo" accept="image/*" onchange="upload(this)">
                                    <img data-src="holder.js/700x320" style="margin-top:5px;" class="img-responsive"
                                         id="img-upload-image"
                                         alt="" imag-name="" src="">
                                </div>
                            </div>
                            <div class="box-footer">
                                <button type="button" onclick="submitData()" class="btn btn-primary">添加</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!--内容-->
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>版本</b> 1.0
        </div>
        <strong>版权 &copy; 2017-2018 归<a href="">xxx</a>.</strong> 所有
    </footer>
    <div class="control-sidebar-bg"></div>
</div>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/fastclick/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/dist/js/app.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/dist/js/demo.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"
        charset="UTF-8"></script>
<script>
    //图片和 视频的上传功能
    function upload(fileDom) {
        //获取文件
        let file = fileDom.files[0];
        //判断类型
        let fileType = file.type.split("/")[0];
        //判断大小
        if (file.size > 24288000) {
            alert("文件过大")
            return;
        }
        //数据格式化
        let formData = new FormData();
        formData.append("uploadFile", file);
        formData.append("fileType", fileType)
        //上传图片和视频
        $.ajax({
            url: "/admin/uploadImage",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            dataType: "json",
            mimeType: "multipart/form-data",
            success: function (res) {
                $('#img-upload-image').attr("src", res.data.src)
                $('#img-upload-image').attr("imag-name", res.data.fileName)
            },
            beforeSend: function () {
            },
            error: function (e1, e2) {
                console.log(e1)
                console.log(e2)

            }
        });
    }

    //收集数据
    function submitData() {
        let img_upload_image = $('#img-upload-image').attr("imag-name");
        let input_title = $('#input_title').val();
        let input_description = $('#input_description').val();

        if (
            checkIfItIsEmpty(img_upload_image) &&
            checkIfItIsEmpty(input_title) &&
            checkIfItIsEmpty(input_description)) {
            const fromData = {
                'upload_user': "${sessionScope.adminId}",
                'img_upload_image': img_upload_image,
                'input_title': input_title,
                'input_description': input_description
            }
              $.ajax({
                         url:"/admin/addPreview",
                         data:fromData,
                         type:"post",
                         dataType:"json",
                         success :function (res){

                             if (res.code==200){
                                 alert("添加成功")
                                 location.href="/admin/goAddPreviewVideo";
                             }
                         },
                         error:function (e1,e2,e3){
                             console.log(e1)
                         console.log(e2);
                             console.log(e3)
                         }
                     })
        }else {
            alert("存在未输入的信息")
        }
    }

    function checkIfItIsEmpty(obj) {
        if (obj == '' || obj == null) {
            return false
        } else
            return true;
    }
</script>

</body>
</html>